<template>
  <view class="cusTabs">
    <view
      v-for="item in tabs"
      :key="item.key"
      :class="['tab_item', { tab_avtive: item.key === current }]"
      @click="tabClick(item)"
    >
      {{ item.name }}
    </view>
  </view>
</template>

<script setup>
import { reactive } from "vue";
const emits = defineEmits(["update:current"]);
const props = defineProps({
  tabs: {
    type: Array,
    default: () => [],
  },
  current: {
    type: Number,
    default: 0,
  },
});
const tabClick = (e) => {
  console.log(e);
  emits("update:current", e.key);
};
</script>
<style scoped lang="scss">
.cusTabs {
  width: 100%;
  display: flex;
  .tab_item {
    flex: 1;
    text-align: center;
    position: relative;
    font-size: 34rpx;
    color: #333333;
    font-family: PingFang SC-Regular;
  }
  .tab_avtive {
    color: #1777ff;
    font-weight: 500;
    font-weight: bold;
    &::before {
      content: "";
      width: 120rpx;
      height: 2px;
      background-color: #1777ff;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: -8rpx;
    }
  }
}
</style>
